<template>
  	<div id="myNews">
  		<header>
  			<i @click="goBack()"></i>
  			<div>我的供应室</div>
  		</header>
  		<!-- <div class="nav">
  			<div  class='active' @click='getNewsList(0,sentPage,"click")'>
  				<a class="abstract">
	  				<b>全部消息</b>
	  			</a>
  			</div>
  			<div  @click='getNewsList(1,sentPage,"click")'>
		  		<a class="newfresh">
		  			<b>系统消息</b>
		  		</a>
	  		</div>
  		</div>
  		<div class="swipe">
            <div class="allNews">
                <div class="markReadBox"  v-if="list.length>=1">
                    <div class="markRead" @click='hasRead'>全部标为已读</div>
                </div>
                <div class='box'>
                    <Loadmore
                        :bottom-method="loadBottom"
                        :bottom-all-loaded="allLoaded"
                        ref="loadmore"
                        :autoFill="false"
                    >
                    <ul class="allNewsList">
                        <div class='mc' v-if="list.length<1">
                            <img src="../../image/no_collection@2x.png" width='110' alt="">
                            <p>您还没有相关的消息</p>
                        </div>
                        <li v-for="(item,index) in list" :key="index">
                            <router-link :to='{name: "myNewsDetails",query: {id: item.id}}' :class='item.read?"hasRead":""'>
                                <div>
                                    <h3>{{item.name}}</h3>
                                    <p>
                                        <time>{{item.time}}</time>
                                        <span></span>
                                    </p>
                                    <div>{{item.content}}</div>
                                </div>
                                <span></span>
                            </router-link>
                        </li>
                    </ul>
                    </Loadmore>
                </div>
                
            </div>
  		</div> -->
	</div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
	// import allNews from '../../components/myNews/allNews.vue'
	// import systemNews from '../../components/myNews/systemNews.vue'
	export default {
		data() {
			return {
				list: [],
                userid: '',
                type: 'all',  //全部消息 系统消息 all window
				isShow: true,
                sentPage:{
                  page : 1,//分页累加
                },//接口入参
                totalNum: 0,    //总数据条数
                allLoaded: false,//分页数据是否已经加载完毕
			}
		},
		components: {
            Loadmore,
			// 'all-news': allNews,
			// 'system-news': systemNews,
		},
		methods: {
			goBack() {
				this.$router.push({path:'/my'})
			},
			// changeSwip(para,index) {
			// 	this.isShow = para;
			// 	$(".nav div a").removeClass("active");
			// 	$(".nav div").eq(index).find("a").addClass("active");
			// },
            //获取消息列表
            getNewsList(i,params,click) {
                $('.nav div').eq(i).addClass('active').siblings().removeClass();
                //每点击一次初始化
                if(click) {
                    this.list = [];
                    this.sentPage.page = 1;
                    this.allLoaded = false;
                }
                this.userid = localStorage.getItem("loginMobile");
                if(i==0) {
                    this.type = 'all';
                    this.$api.post(this.$api.baseURLSchool,"selecttype_view/message/0?userid="+this.userid,params,r => {
                        // console.log(r);
                        this.totalNum = r.data.records;
                        if(this.sentPage.page==1) {
                            this.list = r.data.rows;
                        }else {
                            this.list = this.list.concat(r.data.rows);
                        }
                        if(r.data.rows.length == 0&&this.sentPage.page>1) {
                            this.$utils._toast("暂无更多数据");
                        }
                        if(this.totalNum == this.list.length) {
                            this.allLoaded = true;
                        }

                    },err => {
                        console.log(err);
                    })
                }
                if(i==1) {
                    this.type = 'window';
                    this.$api.post(this.$api.baseURLSchool,"selecttype_view/message/0?userid="+this.userid+"&type=window",params,r => {
                        console.log(r);
                        this.totalNum = r.data.records;
                        if(this.sentPage.page==1) {
                            this.list = r.data.rows;
                        }else {
                            this.list = this.list.concat(r.data.rows);
                        }
                        if(r.data.rows.length == 0&&this.sentPage.page>1) {
                            this.$utils._toast("暂无更多数据");
                        }
                    },err => {
                        console.log(err);
                    })
                }
            },
            //上拉加载下一页
            loadBottom() {
                (this.sentPage.page)++;
                if(this.type == 'all') {
                    setTimeout(() => {
                        this.getNewsList(0,this.sentPage);
                    }, 20);
                }else if(this.type=="window") {
                    setTimeout(() => {
                        this.getNewsList(1,this.sentPage);
                    }, 20);
                }
                if(this.totalNum == this.list.length) {
                    this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded();
            },
            // 全部标记已读
            hasRead() {
                // read  是否读过  true 读过 false 未读
                // console.log(this.list);
                this.list.forEach((val,index) => {
                    const obj = {
                        id: val.id,
                        read: true
                    }
                    this.$api.post(this.$api.baseURLSchool,"updatedata/message/edit",obj,r => {
                        // console.log(r);
                        if(this.type == 'all') {
                            this.getNewsList(0,this.sentPage,"click");
                        } else {
                            this.getNewsList(1,this.sentPage,"click");
                        }   
                    },err => {
                        console.log(err);
                    })
                });
            }
		},
		created() {
            this.getNewsList(0,this.sentPage);
		}
	}
</script>
<style lang="scss" scoped>
    .mc {
        padding: 40px 0;
        margin: auto;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        img {
            display: block;
            margin: 0 auto;
        }
        p {
            padding-top: 10px;
            text-align: center;
        }
    }
</style>
